<template>
  <div class="container">
    <div class="catalogue" v-loading="treeLoading">
      <CatalogueTree :treeData="treeData" @openDrawer="openDrawer" @loadTree="getTreeData" @getRowData="getRowData"
                     ></CatalogueTree>
    </div>
    <div class="table" v-loading="loading" v-if="selectRow.id">
      <div class="table-body" style="margin-top: 0">
        <div class="top-wrapper clearfix">
          <div class="left">
            <div class="main-text">{{selectRow.name || '请先选择左侧部门'}} </div>
            <div class="second-text">你是{{userInfo.roleInfo[0].roleName}}成员，拥有{{userInfo?.roleInfo[0]?.roleName}}权限</div>
          </div>
          <div class="right">
            <el-button @click="handleEdit" class="plain-btn edit-btn">
              <div style="display: flex;align-items: center;">
                <span style="margin-right: 10px">编辑部门</span>
                <img src="@/assets/img/icon-bjbm.png" alt="">
              </div>
            </el-button>
          </div>
        </div>
        <div class="clearfix" style="margin-bottom: 10px">
          <el-button size="small" class="green-btn" @click="handleAddUser">添加成员</el-button>
          <el-button size="small" class="plain-btn" @click="handleSetBatch">批量设置主管</el-button>
          <el-button size="small" class="default-btn" @click="handleDelBatch">批量删除</el-button>
        </div>
        <el-table :data="tableData" :border="false" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column prop="loginName" label="账号名称">
            <template slot-scope="scope">
              <span>{{scope.row.loginName}}</span>
              <el-tag class="tag" v-show="scope.row.deptMonster">主管</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="用户名"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="duty" label="职位"></el-table-column>
          <el-table-column prop="StrStatus" label="角色"></el-table-column>
          <el-table-column prop="enable" label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.enable ? '正常' :'禁用'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="customEdit(scope.row)" size="small" type="text">编辑</el-button>
              <el-popover placement="bottom" width="100" trigger="hover" style="margin-left: 10px">
                <div class="hover">
                  <div @click="customSet(scope.row)">设为主管</div>
                  <div @click="customStop(scope.row)">{{scope.row.enable ? '禁用' : '启用'}}</div>
                  <div @click="customReSetPwd(scope.row)">重置密码</div>
                  <div @click="customRemove(scope.row)">删除</div>
                </div>
                <el-button type="text" @click="stop($event)" slot="reference"
                >更多<i class="el-icon-arrow-down"></i
                ></el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="clearfix">
          <el-pagination
              style="text-align: center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.pageIndex"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <departmentDrawer
        ref="drawerForm"
        :treeData="treeData"
        :visible.sync="visible"
        :selectRow="selectRow"
        @close="closeDepartmentDrawer"
    ></departmentDrawer>
    <RoleDrawer
        ref="userForm"
        :mode="mode"
        :visible.sync="drawerVisible"
        :selectRow="selectRow"
        @close="closeDrawer"
    ></RoleDrawer>
  </div>
</template>

<script>
import {sandbox} from "@/libs/util";
import table from '@/mixins/table'
import CatalogueTree from "./components/CatalogueTree";
import DepartmentDrawer from "./components/DepartmentDrawer";
import RoleDrawer from "./components/RoleDrawer";

export default {
  data() {
    return {
      formField: sandbox({
        deptId: "",
        userName: "",
      }),
      mode:'add',
      tableData: [],
      selectionData: [],
      treeData: [],
      selectRow:{},
      visible:false,
      drawerVisible:false,
      treeLoading:false,
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
    };
  },
  components: {
    RoleDrawer,
    DepartmentDrawer,
    CatalogueTree,
  },
  mixins: [table],
  methods: {
    LoadTableDataMethod() {
      return this.$api
          .api_urcap_departmentManage_deptUserPage({
            param: Object.assign(this.formField, this.pagination)
          })
          .then(res => {
            this.tableData = res.data.records
            this.pagination.currentPage = res.data.current
            this.pagination.pageSize = res.data.size
            this.pagination.total = res.data.total
          })
    },

    getRowData(row) {
      this.formField.deptId = row.id
      this.selectRow = row
      this.fetchData()
    },
    // 获取树列表
    getTreeData() {
      this.treeLoading = true
      this.$api
          .api_urcap_departmentManage_orgTree()
          .then((res) => {
            this.treeData = res.data.children;
          })
          .finally(() => {
            this.treeLoading = false
          });
    },
    handleEdit(){
      if(!this.selectRow.id){
        return this.$message({
          type: 'error',
          message: '请先选择左侧要编辑的部门!'
        })
      }
      this.visible = true
      // this.selectRow.pid = [this.selectRow.pid.toString()]
      this.$refs.drawerForm.SetData(this.selectRow)
    },
    // 编辑
    customEdit(row){
      this.mode = 'edit'
      this.drawerVisible = true
      this.$refs.userForm.SetData(row)
    },
    handleAddUser(){
      this.mode = 'add'
      this.drawerVisible = true
    },
    // 设置主管
    customSet(row){
      this.$confirm('确认设为主管？', '设为主管', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async () => {
        this.$api.api_urcap_departmentManage_setMonster({
          body:{
            deptId:this.selectRow.id,
            userIds:[row.id],
          },
          config: {showMsg: true}
        }).then((res) => {
          this.fetchData()
        })
      })
    },
    handleSetBatch(){
      if (this.selectionData.length === 0) {
        this.$message({type: "error", message: "至少选择一条数据"});
        return;
      }
      const userIds = this.selectionData.map(ele => ele.id)
      this.$confirm('确认设置为主管？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$api
            .api_urcap_departmentManage_setMonster({
              body:{
                deptId:this.selectRow.id,
                userIds:userIds,
              },
            }).then(() => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    // 禁用启用
    customStop(row){
      this.$api.api_urcap_departmentManage_enableDeptUser({
        param:{
          enable:!row.enable,
          userId:row.id,
        },
        config: {showMsg: true}
      }).then((res) => {
        this.fetchData()
      })
    },
    // 重置密码
    customReSetPwd(row){
      this.$confirm('是否确认重置用户密码？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$api
            .api_urcap_departmentManage_resetDeptUserPwd({
              param:{
                userId:row.id,
              },
              config: {showMsg: true}
            })
            .then(() => {
              this.fetchData()
              this.$message({
                type: 'success',
                message: '重置密码成功!'
              })
            })
      })
    },
    // 删除
    customRemove(row){
      this.$confirm('是否确认删除该成员？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$api
            .api_urcap_departmentManage_deleteDeptUser({ param: { userId: row.id } })
            .then(() => {
              this.fetchData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
      })
    },
    handleSelectionChange(selection) {
      this.selectionData = selection;
    },
    handleDelBatch(){
      if (this.selectionData.length === 0) {
        this.$message({type: "error", message: "至少选择一条数据"});
        return;
      }
      const userIds = this.selectionData.map(ele => ele.id).join(',')
      this.$confirm('是否确认删除选中的成员？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$api
            .api_urcap_departmentManage_deleteDeptUserList({
              param: {
                userIds: userIds,
              }
            }).then(() => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    openDrawer(){
      this.visible = true
    },
    closeDepartmentDrawer(reLoad){
      this.visible = false
      reLoad && this.getTreeData()
    }
  },
  created() {
    this.getTreeData()
  },
};
</script>

<style lang="scss" scoped>
.container{
  display: flex;
}
.catalogue {
  box-sizing: border-box;
  position: relative;
  width: 340px;
  padding: 20px;
  margin: 15px 12px 12px 12px;
  max-height: calc(100% - 60px);
  background: rgba(255,255,255,0.502);
  border-radius: 8px 8px 8px 8px;
  border: 2px solid #FFFFFF;
  overflow: auto;
}

.table {
  flex: 1;
  max-width: calc(100vw - 585px);
}

.top-wrapper{
  padding: 24px;
  border-bottom: 1px solid #DCE1E4;
  margin-bottom: 20px;
  .main-text{
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
  }
  .second-text{
    font-weight: 500;
    font-size: 18px;
    color: #666666;
    margin-top: 12px;
  }
  .edit-btn{
    display: flex;
    align-items: center;
    width: 170px;
    height: 72px;
    font-size: 14px;
    background: linear-gradient( 270deg, #FC9657 0%, #FC9657 0%, #FCA157 100%) !important;
    &:hover{
      background: #fd8337 !important;
    }
  }
}

.hover {
  font-size: 14px;
  color: #333;
}

.hover > div {
  padding: 10px;
  line-height: 15px;
}

.hover>div:hover {
  color: #b45f1a;
  background: #fff4e9;
}

.tag{
  width: 64px;
  height: 30px;
  margin-left: 4px;
  text-align: center  ;
  color: #2774F4;
  background: #ECF2FF;
  border-radius: 4px;
  border: none;
}
</style>
